<template>
  <div>
    <a-card :bordered="false">
      <!--      <a-radio-group name="radioGroup"  :default-value="1">-->
      <a-radio-group name="radioGroup" v-model="UmsIntegralConfig.integralSw">
        允许积分抵扣
        <a-radio :value="1">启用</a-radio>
        <a-radio :value="0">禁用</a-radio>
      </a-radio-group>
      <a-row>
        <a-col :span="24" style="margin-top: 15px">
          积分可使用比例 (单位%):
          <a-input-number :max="100" style="width: 200px" property="请输入积分可使用比例，单位%" v-model="UmsIntegralConfig.integralUsePercent"></a-input-number>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="margin-top: 15px">
          积分汇率（多少积分抵扣1元）:
          <a-input style="width: 200px" property="积分汇率，1元等于多少积分" v-model="UmsIntegralConfig.integralRate"></a-input>
        </a-col>

      </a-row>

      <table class="table table-bordered table-striped text-center" style="margin-top: 20px;margin-left:0px;">
        <thead>
          <tr>
            <th>获取积分的场景</th>
            <th>任务图片</th>
            <th>任务名称</th>
            <th>获取积分数</th>
            <th>每日最多可获得次数</th>
            <th>是否启用</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in UmsIntegralConfig.integralRules " :key="index">
            <td>
              <!-- <j-dict-select-tag v-model="item.type" dictCode="pay_channel_back" :triggerChange="true" /> -->
              <span v-if="item.type==30">用户注册</span>
              <span v-if="item.type==32">签到</span>
              <span v-if="item.type==33">完成评价</span>
              <span v-if="item.type==34">分享商品</span>
              <span v-if="item.type==35">邀请好友</span>
              <span v-if="item.type==36">成为VIP</span>
              <span v-if="item.type==37">上传素材</span>
              <span v-if="item.type==38">采纳素材</span>
              <span v-if="item.type==39">完善信息</span>
            </td>
            <td @click="upload(index)" style="width: 40px;">
              <img :src="item.icon" style="width:40px;height: 40px">
            </td>
            <td>
              <a-input style="width:120px" v-model="item.remark"></a-input>
            </td>
            <td>
              <a-input-number :min="0" :step="1" :precision="0" style="width:100px" v-model="item.integral"></a-input-number>
            </td>
            <td>
              <a-input-number :min="0" :step="1" :precision="0" style="width:100px" v-model="item.limit"></a-input-number>
            </td>
            <td>
              <a-select :default-value="1" style="width:100px" v-model="item.sw">
                <a-select-option :value="1">
                  启用
                </a-select-option>
                <a-select-option :value="0">
                  不启用
                </a-select-option>
              </a-select>
            </td>
          </tr>
        </tbody>
      </table>

      <a-modal v-model="visable" @ok="uploadSure()">
        <j-image-upload v-model="imgSrc"></j-image-upload>
      </a-modal>

    </a-card>
    <footer-tool-bar>
      <a-button type="primary" @click="sureEdit" :loading="loading">保存修改</a-button>
    </footer-tool-bar>
  </div>
</template>

<script>
import FooterToolBar from '@/components/tools/FooterToolBar'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'

import JInput from "@/components/jeecg/JInput"
import JImageUpload from '@/components/jeecg/JImageUpload'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { postAction, getAction } from '@/api/manage'

const DetailListItem = DetailList.Item

export default {
  components: {
    JInput,
    FooterToolBar,

    DetailList,
    DetailListItem,
    STable,
    JImageUpload,
    JDictSelectTag
  },
  data () {
    return {
      loading: false,
      a: '',
      UmsIntegralConfig: {
        integralSw: '',
        integralUsePercent: '',
        integralRate: '',
        integralRules: {}
      },
      url: {
        edit: "cmsConfig/setIntegralConfig",
        list: "cmsConfig/queryIntegralConfig"
      },
      visable: false,
      visable2: false,
      imgSrc: "",
      index: '',
    }
  },
  methods: {
    uploadSure () {
      console.log(this.index)
      this.UmsIntegralConfig.integralRules[this.index].icon = this.imgSrc
      this.visable = false
    },
    upload (index) {
      this.index = index
      this.imgSrc = this.UmsIntegralConfig.integralRules[index].icon
      this.visable = true
    },
    sureEdit () {
      console.log(this.UmsIntegralConfig)
      this.loading = true
      postAction(this.url.edit, this.UmsIntegralConfig).then((res) => {
        if (res.success) {
          console.log("修改成功")
          this.$message.info('修改成功')
        }
        if (res.code === 510) {
          this.$message.warning(res.message)

        }
        this.loading = false
      })
    },
    getOfflinePayConfig () {
      getAction(this.url.list, this.UmsIntegralConfig).then((res) => {
        if (res.success) {
          this.UmsIntegralConfig = res.result

        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
  },
  created () {
    this.getOfflinePayConfig()
  },

  computed: {
    title () {
      return this.$route.meta.title
    }
  },

}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

tr,
th {
  text-align: center;
  width: 130px;
}
</style>